<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>患者个人信息表</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        .user-list {
            margin-top: 20px;
        }
        .user-item {
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
        }
        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定位置 */
            z-index: 1; /* 确保在最上层 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0); /* 背景色 */
            background-color: rgba(0,0,0,0.4); /* 带透明度的背景色 */
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 垂直居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 class="mt-5">患者个人信息表</h1>
        <div class="mt-3">
            <div class="input-group mb-3">
                <input type="text" id="searchUser" class="form-control" placeholder="搜索患者...">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" onclick="searchUser()">搜索</button>
                </div>
            </div>
            <button class="btn btn-primary" onclick="addNewUser()">添加患者</button>
        </div>
        <div class="user-list mt-3">
            {% for user in userList %}
            <div class="user-item card mb-3">
                <div class="card-body">
                    <h5 class="card-title">{{ user.name }}</h5>
                    <p class="card-text"><strong>ID:</strong> {{ user.id }}</p>
                    <p class="card-text"><strong>身份证号码:</strong> {{ user.identity_card }}</p>
                    <p class="card-text"><strong>住院号:</strong> {{ user.admission_no }}</p>
                    <p class="card-text"><strong>性别:</strong> {{ user.gender }}</p>
                    <p class="card-text"><strong>年龄:</strong> {{ user.age }}</p>
                    <p class="card-text"><strong>生育史:</strong> {{ user.fertility_history }}</p>
                    <p class="card-text"><strong>教育程度:</strong> {{ user.education_level }}</p>
                    <p class="card-text"><strong>职业:</strong> {{ user.occupation }}</p>
                    <p class="card-text"><strong>诊断:</strong> {{ user.diagnosis }}</p>
                    <p class="card-text"><strong>合并疾病:</strong> {{ user.comorbidity }}</p>
                    <p class="card-text"><strong>治疗方式:</strong> {{ user.therapeutic_modality }}</p>
                    <p class="card-text"><strong>医疗费用承担方式:</strong> {{ user.methods_of_medical_cost_coverage }}</p>
                    <p class="card-text"><strong>婚姻状况:</strong> {{ user.marital_status }}</p>
                    <p class="card-text"><strong>电话:</strong> {{ user.phone }}</p>
                    <p class="card-text"><strong>紧急联系人:</strong> {{ user.emergency_contact }}</p>
                    <p class="card-text"><strong>紧急联系人电话:</strong> {{ user.emergency_contact_phone }}</p>
                    <p class="card-text"><strong>家庭住址:</strong> {{ user.address }}</p>
                    <p class="card-text"><strong>农业户口:</strong> {{ user.agricultural_indicator }}</p>
                    <p class="card-text"><strong>体温:</strong> {{ user.temperature }}</p>
                    <p class="card-text"><strong>脉搏:</strong> {{ user.pulse }}</p>
                    <p class="card-text"><strong>呼吸频率:</strong> {{ user.respiration_rate }}</p>
                    <p class="card-text"><strong>血压:</strong> {{ user.blood_pressure }}</p>
                    <p class="card-text"><strong>创建时间:</strong> {{ user.create_time }}</p>
                    <p class="card-text"><strong>更新时间:</strong> {{ user.update_time }}</p>
                    <a href="/user/users/{{ user.id }}" class="btn btn-info">用户详情</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 模态框 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2 class="mb-4">新增用户</h2>
            <form id="userForm">
                <div class="form-group">
                    <label for="name">姓名:</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="identity_card">身份证号:</label>
                    <input type="text" class="form-control" id="identity_card" name="identity_card" required>
                </div>
                <div class="form-group">
                    <label for="admission_no">住院号:</label>
                    <input type="text" class="form-control" id="admission_no" name="admission_no" required>
                </div>
                <div class="form-group">
                    <label for="gender">性别:</label>
                    <select class="form-control" id="gender" name="gender" required>
                        <option value="Male">男</option>
                        <option value="Female">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="age">年龄:</label>
                    <input type="number" class="form-control" id="age" name="age" required>
                </div>
                <div class="form-group">
                    <label for="fertility_history">生育史:</label>
                    <input type="text" class="form-control" id="fertility_history" name="fertility_history" required>
                </div>
                <div class="form-group">
                    <label for="education_level">教育水平:</label>
                    <select class="form-control" id="education_level" name="education_level" required>
                        <option value="Primary">小学</option>
                        <option value="Secondary">中学</option>
                        <option value="Higher">大学及以上</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="occupation">职业:</label>
                    <input type="text" class="form-control" id="occupation" name="occupation" required>
                </div>
                <div class="form-group">
                    <label for="diagnosis">诊断:</label>
                    <input type="text" class="form-control" id="diagnosis" name="diagnosis" required>
                </div>
                <div class="form-group">
                    <label for="comorbidity">合并症:</label>
                    <input type="text" class="form-control" id="comorbidity" name="comorbidity" required>
                </div>
                <div class="form-group">
                    <label for="therapeutic_modality">治疗方式:</label>
                    <input type="text" class="form-control" id="therapeutic_modality" name="therapeutic_modality" required>
                </div>
                <div class="form-group">
                    <label for="methods_of_medical_cost_coverage">医疗费用承担方式:</label>
                    <input type="text" class="form-control" id="methods_of_medical_cost_coverage" name="methods_of_medical_cost_coverage" required>
                </div>
                <div class="form-group">
                    <label for="marital_status">婚姻状况:</label>
                    <select class="form-control" id="marital_status" name="marital_status" required>
                        <option value="Single">单身</option>
                        <option value="Married">已婚</option>
                        <option value="Divorced">离异</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="phone">电话:</label>
                    <input type="text" class="form-control" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="emergency_contact">紧急联系人:</label>
                    <input type="text" class="form-control" id="emergency_contact" name="emergency_contact" required>
                </div>
                <div class="form-group">
                    <label for="emergency_contact_phone">紧急联系人电话:</label>
                    <input type="text" class="form-control" id="emergency_contact_phone" name="emergency_contact_phone" required>
                </div>
                <div class="form-group">
                    <label for="address">地址:</label>
                    <input type="text" class="form-control" id="address" name="address" required>
                </div>
                <div class="form-group">
                    <label for="agricultural_indicator">农村户口:</label>
                    <select class="form-control" id="agricultural_indicator" name="agricultural_indicator" required>
                        <option value="True">是</option>
                        <option value="False">否</option>
                    </select>
                </div>
                <!-- 新增字段 -->
                <div class="form-group">
                    <label for="temperature">体温:</label>
                    <input type="text" class="form-control" id="temperature" name="temperature">
                </div>
                <div class="form-group">
                    <label for="pulse">脉搏:</label>
                    <input type="text" class="form-control" id="pulse" name="pulse">
                </div>
                <div class="form-group">
                    <label for="respiration_rate">呼吸频率:</label>
                    <input type="text" class="form-control" id="respiration_rate" name="respiration_rate">
                </div>
                <div class="form-group">
                    <label for="blood_pressure">血压:</label>
                    <input type="text" class="form-control" id="blood_pressure" name="blood_pressure">
                </div>
                <button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
            </form>
        </div>
    </div>

    <script>
        function searchUser() {
            var searchTerm = document.getElementById('searchUser').value;
            fetch(`/user/users?search=${searchTerm}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                var userList = document.querySelector('.user-list');
                userList.innerHTML = '';
                data.users.forEach(user => {
                    var userItem = `
                        <div class="user-item card mb-3">
                            <div class="card-body">
                                <h5 class="card-title">${user.name}</h5>
                                <p class="card-text"><strong>ID:</strong> ${user.id}</p>
                                <p class="card-text"><strong>身份证号码:</strong> ${user.identity_card}</p>
                                <p class="card-text"><strong>住院号:</strong> ${user.admission_no}</p>
                                <p class="card-text"><strong>性别:</strong> ${user.gender}</p>
                                <p class="card-text"><strong>年龄:</strong> ${user.age}</p>
                                <p class="card-text"><strong>生育史:</strong> ${user.fertility_history}</p>
                                <p class="card-text"><strong>教育程度:</strong> ${user.education_level}</p>
                                <p class="card-text"><strong>职业:</strong> ${user.occupation}</p>
                                <p class="card-text"><strong>诊断:</strong> ${user.diagnosis}</p>
                                <p class="card-text"><strong>合并疾病:</strong> ${user.comorbidity}</p>
                                <p class="card-text"><strong>治疗方式:</strong> ${user.therapeutic_modality}</p>
                                <p class="card-text"><strong>医疗费用承担方式:</strong> ${user.methods_of_medical_cost_coverage}</p>
                                <p class="card-text"><strong>婚姻状况:</strong> ${user.marital_status}</p>
                                <p class="card-text"><strong>电话:</strong> ${user.phone}</p>
                                <p class="card-text"><strong>紧急联系人:</strong> ${user.emergency_contact}</p>
                                <p class="card-text"><strong>紧急联系人电话:</strong> ${user.emergency_contact_phone}</p>
                                <p class="card-text"><strong>家庭地址:</strong> ${user.address}</p>
                                <p class="card-text"><strong>农业户口:</strong> ${user.agricultural_indicator}</p>
                                <p class="card-text"><strong>体温:</strong> ${user.temperature}</p>
                                <p class="card-text"><strong>脉搏:</strong> ${user.pulse}</p>
                                <p class="card-text"><strong>呼吸频率:</strong> ${user.respiration_rate}</p>
                                <p class="card-text"><strong>血压:</strong> ${user.blood_pressure}</p>
                                <p class="card-text"><strong>创建时间:</strong> ${user.create_time}</p>
                                <p class="card-text"><strong>更新时间:</strong> ${user.update_time}</p>
                                <a href="/user/users/${user.id}" class="btn btn-info">用户详情</a>
                            </div>
                        </div>
                    `;
                    userList.innerHTML += userItem;
                });
            })
            .catch(error => {
                console.error('Error:', error);
                alert('搜索失败，请稍后重试');
            });
        }

        function addNewUser() {
            // 显示模态框
            document.getElementById('modal').style.display = 'block';
        }

        function closeModal() {
            // 隐藏模态框
            document.getElementById('modal').style.display = 'none';
        }

        async function submitForm() {
            // 获取表单数据
            var formData = {
                name: document.getElementById('name').value,
                identity_card: document.getElementById('identity_card').value,
                admission_no: document.getElementById('admission_no').value,
                gender: document.getElementById('gender').value,
                age: document.getElementById('age').value,
                fertility_history: document.getElementById('fertility_history').value,
                education_level: document.getElementById('education_level').value,
                occupation: document.getElementById('occupation').value,
                diagnosis: document.getElementById('diagnosis').value,
                comorbidity: document.getElementById('comorbidity').value,
                therapeutic_modality: document.getElementById('therapeutic_modality').value,
                methods_of_medical_cost_coverage: document.getElementById('methods_of_medical_cost_coverage').value,
                marital_status: document.getElementById('marital_status').value,
                phone: document.getElementById('phone').value,
                emergency_contact: document.getElementById('emergency_contact').value,
                emergency_contact_phone: document.getElementById('emergency_contact_phone').value,
                address: document.getElementById('address').value,
                agricultural_indicator: document.getElementById('agricultural_indicator').value === 'True',
                // 新增字段
                temperature: document.getElementById('temperature').value,
                pulse: document.getElementById('pulse').value,
                respiration_rate: document.getElementById('respiration_rate').value,
                blood_pressure: document.getElementById('blood_pressure').value
            };

            console.log('Form Data:', formData);  // 打印表单数据

            try {
                // 发送数据到服务器
                const response = await fetch('/user/users', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });

                console.log('Response Status:', response.status);  // 打印响应状态码

                if (response.status === 200 || response.status === 201) {
                    // 显示成功提示
                    alert('新增用户成功');
                    // 关闭模态框
                    closeModal();
                } else {
                    // 获取错误信息
                    const errorData = await response.json();
                    console.error('Server Error:', errorData);
                    // 显示失败提示
                    alert('新增用户失败: ' + errorData.message);
                }
            } catch (error) {
                console.error('Fetch Error:', error);
                // 显示失败提示
                alert('新增用户失败: 网络请求错误');
            }
        }

        // 点击模态框外部区域关闭模态框
        window.onclick = function(event) {
            var modal = document.getElementById('modal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }
    </script>

    <!-- 引入Bootstrap JS和依赖 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>